<template>
	<!-- 传进来判断是否显示 -->
	<div v-if="props.processInstanceId">
		<div class="d-module-title">
			<b>审批信息</b>
		</div>

		<a-timeline style="margin-top: 25px">
			<a-timeline-item v-for="(progressItem, progressIndex) in approvalSpeedProgress" :key="progressItem.id">
				<template v-if="progressItem.type == '0'">
					<a-tag color="processing" style="border-radius: 12px; margin-bottom: 10px">发起申请</a-tag>
					<a-descriptions layout="vertical" bordered size="small">
						<a-descriptions-item>
							<template #label>
								<div class="flex-space-between">
									<span>发起人：{{ progressItem.initiatorName }}</span>
									<span>{{ progressItem.operationDate }}</span>
								</div>
							</template>
							<a-row style="line-height: 30px">
								<a-col :span="24">
									<a-space :size="10">
										<span class="default-color">抄送人(已抄送{{ progressItem.sendPersonList.length }}人)</span>
										<span v-if="progressItem.sendPersonList.length - progressItem.readCount > 0" class="warning-color">{{ progressItem.sendPersonList.length - progressItem.readCount }}人未读</span>
									</a-space>
								</a-col>
								<a-col :span="24">
									<a-tag v-for="(item, index) in progressItem.sendPersonList" color="#EFF1F4" style="color: #4e5969" :key="item.name">
										<svg-icon :icon-class="`icon-contract-approval${item.readStatus ? '1' : '0'}`" />
										{{ item.name }}
									</a-tag>
								</a-col>
							</a-row>
						</a-descriptions-item>
					</a-descriptions>
				</template>
				<template v-else>
					<template v-if="progressItem.nodeStatus != 4">
						<template v-for="(item, index) in progressItem.approvalPersonList" :key="item.name">
							<a-tag :color="approvalStatusList[item.approvalStatus].color" style="border-radius: 12px; margin-bottom: 10px">{{ approvalStatusList[item.approvalStatus].name }}</a-tag>
							<a-descriptions layout="vertical" bordered size="small" style="margin-bottom: 10px">
								<a-descriptions-item>
									<template #label>
										<div class="flex-space-between">
											<span>审批人：{{ item.name }}</span>
											<span>{{ item.approvalTime }}</span>
										</div>
									</template>
									<a-row style="line-height: 30px">
										<a-col :span="24">
											<a-space :size="10">
												<span class="default-color">审批类型：</span>
												<span>{{ progressItem.approvalType == 1 ? '或签' : '会签' }}</span>
											</a-space>
										</a-col>
										<a-col :span="24" v-if="[2, 3].includes(item.approvalStatus)">
											<a-space :size="10">
												<span class="default-color">备注：{{ item.approvalComment }}</span>
											</a-space>
										</a-col>
									</a-row>
								</a-descriptions-item>
							</a-descriptions>
						</template>
						<a-descriptions layout="vertical" bordered size="small" style="margin-bottom: 10px">
							<a-descriptions-item>
								<template #label>
									<div class="flex-space-between">
										<span>抄送人</span>
									</div>
								</template>
								<a-row style="line-height: 30px">
									<a-col :span="24">
										<a-space :size="10">
											<span class="default-color">抄送人(已抄送{{ progressItem.sendPersonList.length }}人)</span>
											<span v-if="progressItem.sendPersonList.length - progressItem.readCount > 0" class="warning-color">{{ progressItem.sendPersonList.length - progressItem.readCount }}人未读</span>
										</a-space>
									</a-col>
									<a-col :span="24">
										<a-tag v-for="(item, index) in progressItem.sendPersonList" color="#EFF1F4" style="color: #4e5969" :key="item.name">
											<svg-icon :icon-class="`icon-contract-approval${item.readStatus ? '1' : '0'}`" />
											{{ item.name }}
										</a-tag>
									</a-col>
								</a-row>
							</a-descriptions-item>
						</a-descriptions>
					</template>
					<template v-else>
						<a-tag color="default" style="border-radius: 12px; margin-bottom: 10px">已撤销</a-tag>
						<!-- 已撤销  -->
					</template>
				</template>
			</a-timeline-item>
		</a-timeline>
	</div>
</template>

<script setup lang="ts">
	import {onMounted, reactive, ref} from 'vue'
	import {getFollowList, modifyConfiguration} from '@/api/contract'

	const props = defineProps<{
		status?: any
		processInstanceId?: string
	}>()
	const approvalSpeedProgress = ref<any>([])

	const approvalStatusList: any = {
		0: {
			name: '待审批',
			color: 'default'
		},
		1: {
			name: '审批中',
			color: 'processing'
		},
		2: {
			name: '已驳回',
			color: 'error'
		},
		3: {
			name: '已通过',
			color: 'success'
		},
		4: {
			name: '已撤销',
			color: 'default'
		}
	}

	// 获取审批进度信息列表
	// 接口需更换
	const getApprovalDetail = () => {
		getFollowList({
			processInstanceId: props.processInstanceId
		}).then((res: any) => {
			approvalSpeedProgress.value = res.data

			console.log(res, '审批进度')
		})
	}
	onMounted(() => {
		if (props.processInstanceId) {
			getApprovalDetail()
		}
	})
</script>

<style lang="scss" scoped></style>
